<template>
  <div class="collage">
    <div class="collage_goods_list">
      <div class="collage_tab">
        <div class="left" @click="changTab('今日拼团')">
          <img :src="this.jr_img" alt="" />
        </div>
        <div class="right" @click="changTab('精彩预告')">
          <img :src="this.yg_img" alt="" />
        </div>
      </div>
      <div class="goodsList" v-if="todayshow && bayGoodsList.length > 0">
        <div
          class="today_block"
          v-for="(v, index) of bayGoodsList"
          :key="index"
        >
          <div
            class="today_row"
            v-for="(item, index) of v.goodsVoList"
            :key="index"
          >
            <div class="showMsgFlag" v-if="item.showMsgFlag && item.msg">
              <img
                src="https://image.hezongyy.com/pcimage/20211109img/pt_h5_jt.png"
                alt=""
                class="bd"
              />
              <span class="msg">{{ item.msg }}</span>
            </div>
            <div class="row_block">
              <div class="row_tip_people">
                {{ item.numberOfParticipants }}人即可成团
              </div>
              <div class="row_left">
                <div class="left_img">
                  <img :src="item.appCoverPictureUrl" alt="" />
                </div>
                <div class="left_price">
                  <div class="text1">原价:￥{{ item.originalPrice }}</div>
                  <div class="text2">拼团价:</div>
                  <div class="tip">￥{{ item.sellingPrice }}</div>
                </div>
              </div>
              <div class="row_right">
                <div class="text1">{{ item.name }}</div>
                <div class="text2">厂家：{{ item.manufacturerName }}</div>
                <div class="text2">规格：{{ item.specification }}</div>
                <div class="text2">效期：{{ item.expirationDate }}</div>
                <div class="text6" v-if="item.remark">{{ item.remark }}</div>
                <div class="text3">
                  单人固定购买量：{{ item.restrictNumber }}
                </div>
                <div class="text4">
                  <van-progress
                    :percentage="setPercentage(item)"
                    :pivot-text="setText(item)"
                    stroke-width="13"
                    track-color="#f0deb5"
                    class="van_progress"
                  />
                  <div class="row_img_people">
                    <div class="people">
                      <div class="img">
                        <img
                          src="https://image.hezongyy.com/pcimage/20211109img/pt_h5_huo.png"
                          alt=""
                        />
                      </div>
                      已有
                      <div class="big_text">
                        {{ item.actualNumber + item.virtualNumber }}
                      </div>
                      人参团
                    </div>
                  </div>
                </div>
                <div class="text5" v-if="item.isCanBuy == 1">
                  <div class="time1">距拼团结束 {{ v.endTimeObj || "" }}</div>
                  <button
                    class="btn1"
                    :disabled="isDisabled"
                    @click="openDialog(item)"
                  >
                    参团购买
                  </button>
                </div>
                <div class="text5" v-if="item.isCanBuy == 3">
                  <div class="time2">距拼团结束 {{ v.endTimeObj || "" }}</div>
                  <div class="btn2" @click="showFlag(item)">无资格参团</div>
                </div>
                <div class="text5" v-if="item.isCanBuy == 5">
                  <div class="time2">距拼团开始 {{ v.startTimeObj || "" }}</div>
                  <div class="btn2">即将开始</div>
                </div>
                <div class="text5" v-if="item.isCanBuy == 2">
                  <div class="time2">距拼团结束 {{ v.endTimeObj || "" }}</div>
                  <div class="btn2">已参团</div>
                </div>
                <div class="text5" v-if="item.isCanBuy == 4">
                  <div class="time4">距拼团结束 {{ v.endTimeObj || "" }}</div>
                  <div class="btn4">已售罄</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="todayshow && bayGoodsList.length == 0"
        class="goodsList"
        style="text-align: center"
      >
        <img
          style="width: 87px; height: 113px"
          src="https://image.hezongyy.com/pcimage/20211109img/h5_pt_nogoods.png"
          alt=""
        />
        <div style="color: #b70d1a; padding: 20px 0">
          今日拼团活动还未开始，看看预告品种吧~
        </div>
      </div>
      <div
        class="goodsListPreview"
        v-if="previewShow && previewList.length > 0"
      >
        <div class="today_block" v-for="(v, index) of previewList" :key="index">
          <div
            class="today_row"
            v-for="(item, index) of v.goodsVoList"
            :key="index"
          >
            <div class="row_block">
              <div class="row_tip_people">
                {{ item.numberOfParticipants }}人即可成团
              </div>
              <div class="row_left">
                <div class="left_img">
                  <img :src="item.appCoverPictureUrl" alt="" />
                </div>
                <div class="left_price">
                  <div class="text1">原价:￥{{ item.originalPrice }}</div>
                  <div class="text2">拼团价:</div>
                  <div class="tip">￥{{ item.sellingPrice }}</div>
                </div>
              </div>
              <div class="row_right">
                <div class="text1">{{ item.name }}</div>
                <div class="text2">厂家：{{ item.manufacturerName }}</div>
                <div class="text2">规格：{{ item.specification }}</div>
                <div class="text2">效期：{{ item.expirationDate }}</div>
                <div class="text6" v-if="item.remark">{{ item.remark }}</div>
                <div class="text3">
                  单人固定购买量：{{ item.restrictNumber }}
                </div>
                <div class="text5">
                  <div class="time3">{{ getTime(v) }}开拼</div>
                  <div class="btn3">敬请期待</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="previewShow && previewList.length == 0"
        class="goodsListPreview"
        style="text-align: center"
      >
        <img
          style="width: 87px; height: 113px"
          src="https://image.hezongyy.com/pcimage/20211109img/h5_pt_nogoods.png"
          alt=""
        />
        <div style="color: #b70d1a; padding: 20px 0">
          暂无预告商品，请稍后再看~
        </div>
      </div>
      <div class="pt_gz">
        <img
          src="https://image.hezongyy.com/pcimage/20211109img/pt_h5_gz.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
<script>
// 引入保存所有接口的url文件
import url from '../../../axios/apiUrl'
// 引入api.js定义的方法index
import { postRequest } from '../../../api/index'
import { getRequest } from '../../../api/indexGet'
export default {
  data() {
    return {
      todayshow: true, // 今日列表是否显示
      previewShow: false, // 预览列表是否显示
      jr_img:
        'https://image.hezongyy.com/pcimage/20211109img/pt_h5_jr_active.png',
      yg_img:
        'https://image.hezongyy.com/pcimage/20211109img/pt_h5_yg_hover.png',
      bayGoodsList: [],
      previewList: [],
      timerArray: [], // 倒计时timer数组
      showMsgFlagTimerArray: [], // 弹出提示timer数组
      isClick: true, // 是否点击了
      isDisabled: false
    }
  },
  mounted() {
    this.groupPurchase()
    // this.preview()
    this.showMsg()
  },
  methods: {
    // 一进来显示为什么没有资格
    showMsg() {
      clearTimeout(this.showMsgTimer)
      for (let timer of this.showMsgFlagTimerArray) {
        clearTimeout(timer)
      }
      this.showMsgFlagTimerArray = []
      this.showMsgTimer = setTimeout(() => {
        this.bayGoodsList.map((obj) => {
          obj.goodsVoList.map((v) => {
            this.$set(v, 'showMsgFlag', true) // 显示备注
            let timer = setTimeout(() => {
              v.showMsgFlag = false
            }, 3000)
            this.showMsgFlagTimerArray.push(timer)
          })
        })
      }, 400)
    },
    openDialog(item) {
      this.isDisabled = true // 是否点击了
      setTimeout(() => {
        this.isDisabled = false
      }, 1000) // 一秒之后才能点击
      var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      if (isIos) {
        let form = {}
        form.id = item.id
        form.originalPrice = item.originalPrice
        form.goodsId = item.goodsId
        window.webkit.messageHandlers.showGroupBookingAlert.postMessage(form)
      } else {
        japp.placeCollage(item.id, item.goodsId, item.originalPrice)
      }
    },
    // 拼团活动商品列表
    async groupPurchase() {
      let res = await getRequest(url.groupPurchase)
      if (res.data.code == '000000') {
        this.bayGoodsList = res.data.content
        this.countDownInit()
        this.getNowTime()
      } else if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      } else if (res.data.code != '000000') {
        this.$toast(res.data.message)
      }
    },
    // 预览商品
    async preview() {
      let res = await getRequest(url.preview)
      if (res.data.code == '000000') {
        this.previewList = res.data.content
      } else if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      } else if (res.data.code != '000000') {
        this.$toast(res.data.message)
      }
    },
    // 获取预览时间
    getTime(v) {
      if (!v.startTime) return ''
      var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      if (isIos) {
        let m = new Date(v.startTime.replaceAll('-', '/')).getMonth() + 1
        let d = new Date(v.startTime.replaceAll('-', '/')).getDate()
        return m + '月' + d + '日'
      } else {
        let m = new Date(v.startTime).getMonth() + 1
        let d = new Date(v.startTime).getDate()
        return m + '月' + d + '日'
      }
    },
    // 开始时间倒计时
    getStartTimeCount(item) {
      let startTimeObj = {
        hours: '00', // 倒计时时分秒
        minutes: '00', // 倒计时时分秒
        seconds: '00' // 倒计时时分秒
      }
      let startTime
      var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      if (isIos) {
        startTime = new Date(item.startTime.replaceAll('-', '/')).getTime()
      } else {
        startTime = new Date(item.startTime).getTime()
      }
      if (item.startTimeObj === undefined) this.$set(item, 'startTimeObj', '')
      let timer = setInterval(() => {
        // 结束时间时间戳
        if (startTime - item.currentTime > 0) {
          startTimeObj.hours = Math.floor(
            ((startTime - item.currentTime) / 1000 / 60 / 60) % 24
          )
          // 判断小时是否大于24小时
          if (startTime - item.currentTime > 86400000) {
            let num = parseInt((startTime - item.currentTime) / 86400000)
            startTimeObj.hours = num * 24 + startTimeObj.hours
          }
          startTimeObj.minutes = Math.floor(
            ((startTime - item.currentTime) / 1000 / 60) % 60
          )
          startTimeObj.seconds = Math.floor(
            ((startTime - item.currentTime) / 1000) % 60
          )
          if (startTimeObj.hours < 10) {
            startTimeObj.hours = '0' + startTimeObj.hours
          }
          if (startTimeObj.minutes < 10) {
            startTimeObj.minutes = '0' + startTimeObj.minutes
          }
          if (startTimeObj.seconds < 10) {
            startTimeObj.seconds = '0' + startTimeObj.seconds
          }
        } else {
          startTimeObj.hours = '00'
          startTimeObj.minutes = '00'
          startTimeObj.seconds = '00'
        }
        item.startTimeObj = `${startTimeObj.hours}:${startTimeObj.minutes}:${startTimeObj.seconds}`
      }, 1000)
      this.timerArray.push(timer)
    },
    // 结束时间倒计时
    getEndTimeCount(item) {
      let endTimeObj = {
        hours: '00', // 倒计时时分秒
        minutes: '00', // 倒计时时分秒
        seconds: '00' // 倒计时时分秒
      }
      let endTime
      var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
      if (isIos) {
        endTime = new Date(item.endTime.replaceAll('-', '/')).getTime()
      } else {
        endTime = new Date(item.endTime).getTime()
      }
      if (item.endTimeObj === undefined) this.$set(item, 'endTimeObj', '')
      let timer = setInterval(() => {
        // 结束时间时间戳
        if (endTime - item.currentTime > 0) {
          endTimeObj.hours = Math.floor(
            ((endTime - item.currentTime) / 1000 / 60 / 60) % 24
          )
          // 判断小时是否大于24小时
          if (endTime - item.currentTime > 86400000) {
            let num = parseInt((endTime - item.currentTime) / 86400000)
            endTimeObj.hours = num * 24 + endTimeObj.hours
          }
          endTimeObj.minutes = Math.floor(
            ((endTime - item.currentTime) / 1000 / 60) % 60
          )
          endTimeObj.seconds = Math.floor(
            ((endTime - item.currentTime) / 1000) % 60
          )
          if (endTimeObj.hours < 10) {
            endTimeObj.hours = '0' + endTimeObj.hours
          }
          if (endTimeObj.minutes < 10) {
            endTimeObj.minutes = '0' + endTimeObj.minutes
          }
          if (endTimeObj.seconds < 10) {
            endTimeObj.seconds = '0' + endTimeObj.seconds
          }
        } else {
          endTimeObj.hours = '00'
          endTimeObj.minutes = '00'
          endTimeObj.seconds = '00'
        }
        item.endTimeObj = `${endTimeObj.hours}:${endTimeObj.minutes}:${endTimeObj.seconds}`
      }, 1000)
      this.timerArray.push(timer)
    },
    // 选择tab
    changTab(type) {
      // alert(type)
      if (type == '今日拼团') {
        this.todayshow = true
        this.previewShow = false
        this.showMsg()
        this.groupPurchase()
        this.jr_img =
          'https://image.hezongyy.com/pcimage/20211109img/pt_h5_jr_active.png'
        this.yg_img =
          'https://image.hezongyy.com/pcimage/20211109img/pt_h5_yg_hover.png'
      } else if (type == '精彩预告') {
        this.previewShow = true
        this.todayshow = false
        this.preview()
        this.yg_img =
          'https://image.hezongyy.com/pcimage/20211109img/pt_h5_yg_active.png'

        this.jr_img =
          'https://image.hezongyy.com/pcimage/20211109img/pt_h5_jr_hover.png'
      }
    },
    // 获取当前时间
    countDownInit() {
      this.bayGoodsList.map((item) => {
        this.curTime = setInterval(() => {
          item.currentTime = item.currentTime + 1000
        }, 1000)
      })
    },
    // 计算时间
    getNowTime() {
      this.bayGoodsList.map((item) => {
        if (!item.endTime || !item.startTime) return
        this.getStartTimeCount(item)
        this.getEndTimeCount(item)
      })
    },
    // 设置进度条
    setPercentage(row) {
      if (row.isCanBuy != 5) {
        if (row.actualNumber + row.virtualNumber == row.numberOfParticipants) {
          return 100
        } else if (
          row.actualNumber + row.virtualNumber >
          row.numberOfParticipants
        ) {
          let a =
            (row.actualNumber + row.virtualNumber) / row.numberOfParticipants
          let b = parseInt(a) * row.numberOfParticipants
          let v =
            (row.actualNumber + row.virtualNumber - b) /
            row.numberOfParticipants
          let result = v * 100
          if (result < 1) {
            return 1
          } else {
            return result
          }
        } else {
          return parseInt(
            ((row.actualNumber + row.virtualNumber) * 100) /
            row.numberOfParticipants
          )
        }
      } else {
        return 0
      }
    },
    // 设置进度条文字 以及背景颜色
    setText(row) {
      if (row.isCanBuy != 5) {
        if (row.virtualNumber + row.actualNumber >= row.numberOfParticipants) {
          this.$nextTick()
          let node = document.querySelectorAll('.van-progress')
          for (let i of node) {
            if (i.innerText == '已成团') {
              i.style.background = '#FF9100'
            }
          }
          return '已成团'
        } else {
          return (
            '还差' +
            (row.numberOfParticipants -
              (row.actualNumber + row.virtualNumber)) +
            '人成团'
          )
        }
      } else {
        this.$nextTick()
        let node = document.querySelectorAll('.van-progress__pivot')
        for (let i of node) {
          if (i.innerText == '即将开始') {
            i.style.color = '#A37100'
          }
        }
        return '即将开始'
      }
    },
    // 无资格提示
    showFlag(item) {
      if (!item.showMsgFlag) {
        item.showMsgFlag = true
        setTimeout(() => {
          item.showMsgFlag = false
        }, 3000)
      }
    }
  },
  beforeDestroy() {
    for (let timer of this.timerArray) {
      clearInterval(timer)
    }
  }
}
</script>
<style lang="less" scoped src='./index.less'>
</style>
